<template>
  <div id="login">
    <div class="t1">
      <div class="t2">
        <div>Web 登录</div>
        <div>安全存储 共享美好</div>
        <div>
          <img src="@/assets/Copy@1x.png" alt="" />
        </div>
      </div>
      <div class="t3">
        <div v-if="type == 1" class="t4">
          <div class="t6">
            <div :class="type == 1 ? 'active' : ''" @click="type = 1">
              密码登录
            </div>
            <div :class="type == 2 ? 'active' : ''" @click="type = 2">
              扫码登录
            </div>
          </div>
          <div class="t7">
            <div>
              <a-input v-model="name" class="ipt" placeholder="登录账号" />
            </div>
            <div>
              <a-input-password
                v-model="password"
                class="ipt"
                placeholder="登录密码"
              />
            </div>
          </div>
          <div class="t8" @click="isActive =!isActive">
            <img :src="!isActive?require('@/assets/danxxuan2@1x.png'):require('@/assets/danxuan@1x.png')" alt="" />
            注册/登录即同意<span>《服务协议》</span> 和<span>《隐私协议》</span>
          </div>
          <div
            class="btn"
            :class="name && password ? 'yesBtn' : ''"
            @click="name && password ? loginBtn() : noTip()"
          >
            登录
          </div>
        </div>

        <div v-if="type == 2" class="t5">
          <div>扫一扫登录</div>
          <div class="c2">
            <img src="@/assets/1.jpg" alt="" />
          </div>
          <div class="c1">登录XXApp-我的页面右上角-扫一扫</div>
          <div class="c3" @click="type = 1">
            <img src="@/assets/md-verified_user@1x.png" alt="" /> 账号密码登录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      password: "",
      type: 1,
      isActive:false
    };
  },
  mounted() {},
  methods: {
    noTip() {
      this.$message.info("请输入账号和密码");
    },
    loginBtn() {
      if(!this.isActive){
      this.$message.info("请勾选协议");

        return
      }
      this.$router.push({ path: "/documentFile/enjoyTogether/index" });
    },
  },
};
</script>
<style lang="less" scoped>
#login {
  background: #f5f5f5;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .t1 {
    width: 920px;
    height: 533px;
    line-height: 20px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    margin: 0 auto;
    display: flex;

    box-shadow: 0px 2px 6px 0px rgba(136, 136, 136, 45);
    .t2 {
      width: 480px;
      height: 533px;
      line-height: 20px;
      border-radius: 8px 0px 0px 8px;
      background-color: rgba(47, 125, 249, 1);
      padding: 26px;
      text-align: left;
      > div:nth-child(1) {
        color: rgba(245, 245, 245, 1);
        font-size: 32px;
      }
      > div:nth-child(2) {
        color: rgba(245, 245, 245, 1);
        font-size: 16px;
        margin-top: 20px;
      }
      > div:nth-child(3) {
        text-align: center;
        margin-top: 70px;
        img {
          width: 300px;
          margin: 0 auto;
        }
      }
    }
    .t3 {
      width: 480px;
      height: 533px;
      line-height: 20px;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 1);
      text-align: center;
      box-shadow: 0px 2px 6px 0px rgba(136, 136, 136, 45);
      display: flex;
      align-items: center;
      padding: 40px;
      .t4 {
        width: 100%;
      }
      .t5 {
        width: 100%;
        color: rgba(16, 16, 16, 1);
        font-size: 20px;
        .c2 {
          border: 1px solid rgba(215, 215, 215, 1);
          padding: 5px;
          width: 200px;
          height: 200px;
          margin: 24px auto;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 180px;
            height: 180px;
          }
        }
        .c1 {
          color: rgba(85, 85, 85, 1);
          font-size: 16px;
          text-align: center;
        }
        .c3 {
          padding: 6px 10px;
          width: 130px;
          cursor: pointer;
          height: 30px;
          line-height: 20px;
          background-color: rgba(108, 116, 247, 0.16);
          color: rgba(16, 16, 16, 1);
          font-size: 14px;
          margin: 0 auto;
          margin-top: 34px;
          display: flex;
          align-items: center;
          color: rgba(47, 125, 249, 1);
          font-size: 12px;
          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
            color: rgba(47, 125, 249, 1);
            font-size: 12px;
          }
        }
      }
      .t6 {
        display: flex;
        color: rgba(136, 136, 136, 1);
        font-size: 16px;
        justify-content: center;
        div {
          margin: 0 30px;
          cursor: pointer;
          position: relative;
          padding-bottom: 10px;
        }
        .active {
          color: rgba(16, 16, 16, 1);
        }
        .active::after {
          content: "";
          width: 30px;
          display: block;
          position: absolute;
          bottom: 0;
          height: 3px;
          left: 18px;
          line-height: 20px;
          border-radius: 6px;
          background-color: rgba(108, 116, 247, 1);
        }
      }
      .t7 {
        margin-top: 40px;
        > div {
          margin-top: 22px;
        }
        .ipt {
          height: 50px;
          text-align: left;
          line-height: 50px;
          input {
            height: 50px;
          }
        }
      }
      .t8 {
        text-align: left;
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: left;
        margin-top: 16px;
        cursor: pointer;
        span {
          color: #6c74f7;
        }
        img {
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
      }

      .btn {
        width: 360px;
        height: 56px;
        line-height: 56px;
        border-radius: 8px;
        background-color: rgba(153, 153, 153, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        text-align: center;
        cursor: no-drop;
        margin-top: 34px;
      }
      .yesBtn {
        background: #6c74f7;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="less">
.ipt {
  height: 50px;
  text-align: left;
  line-height: 50px;
  input {
    height: 50px;
  }
}
</style>